<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Delivery</title>
    <link rel="stylesheet" href="css/selectize.css">
    <link rel="stylesheet" href="css/selectize.default.css">
    <link rel="stylesheet" href="css/photon.min.css">
    <link rel="stylesheet" href="css/codemirror.css">
    <link rel="stylesheet" href="css/monokai.css">
    <style>
      .body {
        height: 200px;
      }
      .response {
        height: 550px;
      }
      .history {
        overflow: scroll;
      }
      .type {
        background-color: #f5f5f4;
        padding: 4px;
        border-radius: 4px;
        position: absolute;
        right: 20px;
        font-size: 12px;
      }
      .form-group, .form-actions {
        position: relative;
      }
      img[class^="loading-"] {
        position: absolute;
        top: 38px;
        z-index: 1;
        right: 40px;
      }
      .loading {
        filter: blur(2px);
        opacity: 0.2;
      }
      .hidden {
        opacity: 0;
        transform: scale(0,0);
        pointer-events: none;
      }
      .logs-group.hidden {
        height: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
  <div class="window">
    <div class="window-content">
      <div class="pane-group">
          <div class="pane-sm sidebar history">
          </div>
          <div class="pane">
            <div class="padded-more">
              <form>
                <div class="form-group">
                  <label>Server address</label>
                  <select name="url" id="url" class="url selectize server"></select>
                  <img src="loader.svg" alt="Loading" class="loading-server hidden">
                </div>
                <div class="form-group method-group">
                  <label>Method name</label>
                  <select name="method" id="method" class="method selectize"></select>
                  <img src="loader.svg" alt="Loading" class="loading-method hidden">
                </div>
                <div class="form-group body-group">
                  <label>Body <span class="type">application/json</span></label>
                  <textarea class="form-control codemirror body"></textarea>
                  <img src="loader.svg" alt="Loading" class="loading-body hidden">
                </div>
                <div class="form-actions">
                  <button type="submit" class="btn btn-form btn-default reset">Reset</button>
                  <button type="submit" class="btn btn-form btn-primary send">Send</button>
                  <img src="loader.svg" alt="Loading" class="loading-send hidden">
                </div>
              </form>
              <div class="output">
                  <hr>
                  <form>
                    <div class="form-group">
                      <label>Server response</label>
                      <textarea class="form-control codemirror response"></textarea>
                    </div>
                  </form>
              </div>
              <div class="tools">
                <hr>
                <form>
                  <div class="form-group">
                    <label>Tools</label><br>
                    <button type="submit" class="btn btn-form btn-default clearcache">Clear caches</button>
                    <button type="submit" class="btn btn-form btn-default btn-logs">Logs</button>
                  </div>
                  <div class="form-group logs-group hidden">
                    <textarea class="form-control codemirror logs"></textarea>
                  </div>
                </form>
            </div>
            </div>
          </div>
        </div>
    </div>
  </div>
  <script src="ui.js"></script>
  <script src="history.js"></script>
  <script src="clearcaches.js"></script>
  </body>
</html>
